<template>
  <div class="dashboard" v-if="Invoking.ifFunctionCode('mediaAttribute:selectPage')">
    <el-row :gutter="20" class="top-block">
      <el-col :xs="24" :sm="12" :lg="5">
        <div class="grid-content bg-white imgcontent" @click="clickGoto(1)">
          <img src="@/assets/images/index_icon1_03.png" alt />
          <div class="heda_ul_text">在线终端数</div>
          <div class="heda_ul_num">
            {{ !this.arrayList.onClient ? 0 : this.arrayList.onClient }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="5">
        <div class="grid-content bg-white imgcontent" @click="clickGoto(1)">
          <img src="@/assets/images/index_icon2_03.png" alt />
          <div class="heda_ul_text">离线终端数</div>
          <div class="heda_ul_num">
            {{ !this.arrayList.offClient ? 0 : this.arrayList.offClient }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="5">
        <div class="grid-content bg-white imgcontent" @click="clickGoto(1)">
          <img src="@/assets/images/index_icon3_03.png" alt />
          <div class="heda_ul_text">总终端数</div>
          <div class="heda_ul_num">
            {{ !this.arrayList.totalClient ? 0 : this.arrayList.totalClient }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="5">
        <div class="grid-content bg-white imgcontent" @click="clickGoto(1)">
          <img src="@/assets/images/index_icon4_03.png" alt />
          <div class="heda_ul_text">未分组的在线终端</div>
          <div class="heda_ul_num">
            {{
              !this.adStatus.total ? 0 : this.adStatus.total
            }}
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="4">
        <div class="grid-content bg-white imgcontent" @click="clickGoto(2)">
          <img src="@/assets/images/index_icon5_03.png" alt />
          <div class="heda_ul_text">昨日异常开关机</div>
          <div class="heda_ul_num">
            {{ !this.workDate.total ? 0 : this.workDate.total }}
          </div>
        </div>
      </el-col>
<!--      <el-col :xs="24" :sm="12" :lg="4">
        <div class="grid-content bg-white">
          <div class="progress_title">免费空间：163/200M</div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="70"
            style="margin: 10px;"
          ></el-progress>
          <el-button>立即升级</el-button>
        </div>
      </el-col>-->
    </el-row>
    <div class="realtime">
      <el-row :gutter="20">
        <el-col :sm="24" :md="24" :lg="24">
          <div class="grid-content bg-purple-dark">
            <el-tabs type="border-card" @tab-click="tabClickList">
              <el-tab-pane label="最近离线">
                <zycm-table
                style="margin-bottom: 0px;"
                  @zyLoadData="loadOffMedia"
                  zy-border
                  zy-table-ref="loadOffMedia_table"
                  :zy-table-data="tabledata"
                  zy-table-height="480px"
                >
                  <el-table-column
                    prop="clientNumber"
                    label="编号"
                    show-overflow-tooltip
                    min-width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="clientName"
                    label="名称"
                    min-width="180"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="mediaGroupName"
                    label="组名"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column prop="lastReceiveTime" label="最后通信时间" show-overflow-tooltip>
                    <template slot-scope="props">
                      <span>{{ props.row.lastReceiveTime | dateFormat }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="TimeDiff" label="离线时长" width="100">
                    <template slot-scope="scope">
                      <!-- <div v-if="((scope.row.TimeDiff / 3600.0)/24).toFixed(2)>1">{{((scope.row.TimeDiff / 3600.0)/24).toFixed(2)+'天'}}</div>
                      <div v-else>{{scope.row.TimeDiff?(scope.row.TimeDiff / 3600).toFixed(2)+'小时':'0小时'}}</div> -->
                      <div>{{ scope.row.TimeDiff | convertSecond }}</div>
                    </template>
                  </el-table-column>
                </zycm-table>
              </el-tab-pane>
              <el-tab-pane label="当日离线频率">
                <zycm-table
                  @zyLoadData="loadOffMedia"
                  zy-border
                    style="margin-bottom: 0px;"
                  zy-table-ref="loadOffFrequency_table"
                  :zy-table-data="tabledata"
                  zy-table-height="480px"
                >
                  <el-table-column
                    prop="clientNumber"
                    label="编号"
                    show-overflow-tooltip
                    min-width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="clientName"
                    label="名称"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="mediaGroupName"
                    label="组名"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="logNum"
                    label="当日离线次数"
                  ></el-table-column>
                </zycm-table>
              </el-tab-pane>
              <el-tab-pane label="无节目终端组" v-if="Invoking.ifFunctionCode('publishRecord:selectPage')">
                <zycm-table
                  @zyLoadData="loadOffMedia"
                  zy-border
                    style="margin-bottom: 0px;"
                  zy-table-ref="loadNoProg_table"
                  :zy-table-data="tabledata"
                  zy-table-height="480px"
                >
                  <el-table-column
                    prop="mediaGroupName"
                    label="组名"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="programNum"
                    label="上刊数"
                  ></el-table-column>
                </zycm-table>
              </el-tab-pane>
              <el-tab-pane label="无LED节目终端组" v-if="Invoking.ifFunctionCode('ledPublishRecord:selectPage')">
                <zycm-table
                  @zyLoadData="loadOffMedia"
                  zy-border
                    style="margin-bottom: 0px;"
                  zy-table-ref="ledNoProg_table"
                  :zy-table-data="tabledata"
                  zy-table-height="480px"
                >
                  <el-table-column
                    prop="mediaGroupName"
                    label="组名"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="programNum"
                    label="上刊数"
                  ></el-table-column>
                </zycm-table>
              </el-tab-pane>
              <el-tab-pane label="当日异常日志">
                <zycm-table
                  @zyLoadData="loadOffMedia"
                  zy-border
                  zy-table-ref="logError_table"
                  :zy-table-data="tabledata"
                   zy-table-select-type="radio"
                    style="margin-bottom: 0px;"
                  zy-table-height="480px"
                >
                  <el-table-column
                    prop="clientNumber"
                    label="编号"
                    show-overflow-tooltip
                    min-width="100"
                  ></el-table-column>
                  <el-table-column
                    prop="clientName"
                    label="名称"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="mediaGroupName"
                    label="组名"
                    show-overflow-tooltip
                    min-width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="logNum"
                    label="异常日志数"
                  ></el-table-column>
                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button type="primary" :size="GlobalVar.sizeSet.btn" @click="dialogErrorLog(scope.row)"
                        >详情</el-button
                      >
                    </template>
                  </el-table-column>
                </zycm-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
<!--        <el-col :sm="24" :md="24" :lg="8">
          <div class="Collapse">
            <div class="Collapse_head">系统公告</div>
            <div class="Collapse_box">
              <el-collapse accordion collapse @change="changeCollapse">
                <el-collapse-item
                  v-for="item in collapseDataList"
                  :key="item.messageId"
                  :name="item.messageId"
                >
                  <template slot="title">
                    <i
                      class="header-icon el-icon-circle-plus-outline"
                      style="padding-right: 10px"
                    ></i>
                    <span
                      style="color: #409eff; padding-right: 10px"
                      v-if="item.messageType == 1"
                      >【系统公告】</span
                    >
                    <span
                      style="color: #ff5722; padding-right: 10px"
                      v-if="item.messageType == 2"
                      >【个人私信】</span
                    >
                    <span
                      style="color: red; padding-right: 10px"
                      v-if="item.messageType == 3"
                      >【紧急通知】</span
                    >
                    <span class="collapse_tltie">{{
                      item.messageContent
                    }}</span>
                  </template>
                  <div class="Collapse_contenr">
                    <div class="Collapse_contenr_conter">
                      {{ item.messageContent }}
                      <span class="Collapse_contenr_a" v-if="item.contentAddr">
                        <a :href="item.contentAddr" target="_blank"
                          >（下载附件）</a
                        >
                      </span>
                    </div>
                    <div class="Collapse_contenr_b">
                      {{ item.senderName }} {{ item.createTime | dateFormat }}
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                small
                :pager-count="5"
                :page-sizes="[10, 30, 40, 50]"
                :page-size="query.pageSize"
                layout=" prev, pager, next, total"
                :total="parseInt(query.total)"
              ></el-pagination>
            </div>
          </div>
        </el-col>-->
      </el-row>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      title="异常日志"
      :visible.sync="dialogErrorLogVisible"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <zycm-table
            @zyLoadData="loadOffMedia"
            zy-border
            zy-table-ref="dialogErrorLog_table"
            :zy-table-data="tabledata"
            zy-table-height="400px"
            :zy-pager-count="5"
          >
            <el-table-column label="日志时间" prop="logTime" show-overflow-tooltip>
              <template slot-scope="scope">
                <div>{{ scope.row.logTime | dateFormat }}</div>
              </template>
            </el-table-column>
            <el-table-column label="级别" prop="logLevel" width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag type="danger" v-show="scope.row.logLevel == 2" :size="GlobalVar.sizeSet.tag"
                  >错误异常</el-tag
                >
                <el-tag type="success" v-show="scope.row.logLevel == 1" :size="GlobalVar.sizeSet.tag"
                  >普通</el-tag
                >
                <el-tag type="warning" v-show="scope.row.logLevel == 3" :size="GlobalVar.sizeSet.tag"
                  >警告</el-tag
                >
                <el-tag v-show="scope.row.logLevel == 20" :size="GlobalVar.sizeSet.tag">LED普通信息</el-tag>
                <el-tag type="danger" v-show="scope.row.logLevel == 21" :size="GlobalVar.sizeSet.tag"
                  >LED异常信息</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="日志信息" prop="logInfo" min-width="180" show-overflow-tooltip></el-table-column>
          </zycm-table>
        </div>
      </div>
    </el-dialog>
  </div>
  <div class="dashboard" v-else>
      <div style="text-align: center;font-size: 30px;">欢迎进入管理平台！</div>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      dialogErrorLogVisible: false,
      timeLise: [],
      arrayList: "",
      adStatus: "",
      workDate: "",
      tabledata: [], //保存当页的所有table数据
      tablePage: [], //保存对应table的page数据
      formData: new FormData(),
      currentPage4: 10,
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      collapseDataList: [],

    };
  },
  created() {
    this.formData.append("page", 1);
    this.formData.append("pageSize", this.GlobalVar.query.pageSize);
    this.getDataList1();
    this.getDataList2();

    this.timeLise = this.zycmUtils.dateTimeArea(0);
    /* var day1 = new Date();
    day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
    var s1 =
      day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate();
    this.timeLise.push(s1 + " 00:00:00", s1 + " 23:59:59"); */

    this.getYesterdayList();
    var tab = { label: "最近离线" };
    this.tabClickList(tab);
    this.collapseList();
  },
  methods: {
    //   表格
    async loadOffMedia(formData, tableRef) {
      //子组件触发查询时  处理查询的参数
      if (this.tablePage[tableRef]) {
        this.tablePage[tableRef].set("page", formData.get("page"));
        this.tablePage[tableRef].set("pageSize", formData.get("pageSize"));
      }
      let res;
      if (tableRef == "loadOffMedia_table") {
        res = await this.$http.post(
          "mediaAttribute/selectPageOfflineMedia",
          this.tablePage[tableRef]
        );
      } else if (tableRef == "ledNoProg_table") {
        res = await this.$http.post(
          "mediaAttribute/selectPageGroupLedProgNumZero",
          this.tablePage[tableRef]
        );
      } else if (tableRef == "loadNoProg_table") {
        res = await this.$http.post(
          "mediaAttribute/selectPageGroupProgNumZero",
          this.tablePage[tableRef]
        );
      } else if (
        tableRef == "loadOffFrequency_table" ||
        tableRef == "logError_table"
      ) {
        res = await this.$http.post(
          "runLog/pageStatisticsRunLog",
          this.tablePage[tableRef]
        );
      } else if (tableRef == "dialogErrorLog_table") {
        res = await this.$http.post(
          "runLog/selectPage",
          this.tablePage[tableRef]
        );
      } else {
        return;
      }
      if (res && res.data.result === "success") {
        //记录更新分页数据
        //this.tablePage[tableRef] = formData;
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledata) {
          if (this.tabledata[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledata.splice(key, 1);
            } else {
              this.tabledata.splice(key, 1, res.data);
              this.tabledata[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledata[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledata.push(res.data);
        }

      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePage[tableRef]) {
          this.tablePage[tableRef] = new FormData();
          this.tablePage[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePage[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePage[tableRef].set(item[0], item[1]);
        }
      }
      this.loadOffMedia(this.tablePage[tableRef], tableRef);
    },
    async getDataList1() {
      const { data: res } = await this.$http.post(
        "mediaAttribute/selectPage",
        this.formData
      );
      this.arrayList = res;
    },
    async getDataList2() {
      this.formData.append("mediaGroupId", 1);
      this.formData.append("adStatus", 1);
      const { data: res } = await this.$http.post(
        "mediaAttribute/selectPage",
        this.formData
      );
      this.adStatus = res;
    },
    async getYesterdayList() {
      let timeLise2 = this.zycmUtils.dateTimeArea(-1);
      this.formData.append("startDate", timeLise2[0]);
      this.formData.append("endDate", timeLise2[0].split(" ")[0]+" 23:59:59");
      this.formData.append("isNormal", 2);
      const { data: res } = await this.$http.post(
        "workDate/selectPage",
        this.formData
      );
      this.workDate = res;
    },
    // 点击tab
    async tabClickList(tab) {
      this.flag = tab.label;
      let formData = new FormData();
      let tableRef = "";
      if (tab.label == "最近离线") {
        tableRef = "loadOffMedia_table";
      } else if (tab.label == "无节目终端组") {
        tableRef = "loadNoProg_table";
      } else if (tab.label == "无LED节目终端组") {
        tableRef = "ledNoProg_table";
      } else if (tab.label == "当日离线频率") {
        tableRef = "loadOffFrequency_table";
        formData.append("startTime", this.timeLise[0]);
        formData.append("endTime", this.timeLise[1]);
        formData.append("logType", 1);
      } else if (tab.label == "当日异常日志") {
        tableRef = "logError_table";
        formData.append("startTime", this.timeLise[0]);
        formData.append("endTime", this.timeLise[1]);
        formData.append("logType", 4);
      }
      this.currentTableLoad(tableRef, true, formData);
      return;
    },

    // 公告事件
    async collapseList() {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("page", this.query.page);
      formData.append("pageSize", this.query.pageSize);
      const { data: res } = await this.$http.post(
        "messageM/selectMyMessage",
        formData
      );
      this.collapseDataList = res.dataList;
      this.query.total = res.total;
      this.query.pageSize = res.pageSize;
      this.query.page = res.page;
    },
    // 点击折叠板
    async changeCollapse(val) {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("messageId", val);
      const { data: res } = await this.$http.post(
        "messageM/updateReadstatus",
        formData
      );
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.collapseList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.collapseList();
    },
    dialogErrorLog(row) {
      let formData1 = new FormData();
      formData1.append("machineCode", row.machineCode);
      formData1.append("startTime", this.timeLise[0]);
      formData1.append("endTime", this.timeLise[1]);
      this.currentTableLoad("dialogErrorLog_table", true, formData1);


      this.dialogErrorLogVisible = true;
    },
    clickGoto(type){
      if(type === 1){
        this.$router.push({
          path: '/TerminalManagement'
        })
      } else if(type === 2){
        this.$router.push({
          path: '/runTheStatistical'
        })
      }
    }
  },
};
</script>

<style lang="stylus">
.dashboard {
  width: 100%;
 margin-top: 60px;
  .el-row.top-block {
    height: 4rem;

    .el-col {
      height: 100%;
      margin-bottom: 14px;

      .grid-content {
        height: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        padding: 0.32rem;
        color: #555;
        position: relative;
        text-align: center;
      }

      .imgcontent {
        display: flex;
        align-items: center;
        flex-direction: column;

        img {
          width: 64px;
          height: 52px;
          margin: 15px auto;
        }

        .heda_ul_text {
          font-size: 14px;
          color: #808080;
          line-height: 28px;
        }

        .heda_ul_num {
          font-size: 24px;
          color: #78c446;
          margin-top: 0.2rem;
        }
      }

      .progress_title {
        margin-top: 0.5rem;
      }

      /deep/.el-progress {
        margin: 0.3rem 0;
      }
    }
  }

  .realtime {
    width: 100%;

    .TabData {
      background-color: #fff;

      .el-tabs {
        min-height: 600px;
      }
    }

    /deep/.el-tabs__item {
      border-top-right-radius: 6px;
      border-top-left-radius: 6px;
      margin-right: 5px;
      background-color: #e0e0e0;
      padding: 0 25px !important;
      box-sizing: border-box;
      color: #333 !important;
    }

    /deep/.el-table th, .el-table tr {
      background-color: #fafafa;
    }

    /deep/.el-tabs--border-card {
      border-color: #f2f2f2 !important;
      -webkit-box-shadow: 0px 0px 0px 0px !important;
      box-shadow: 0px 0px 0px 0px !important;
    }

    /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
      border: none !important;
      border-top: 4px solid #f2f2f2 !important;
    }

    /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
      border-top: 4px solid #2183d8 !important;
      box-sizing: border-box;
      color: #2183d8 !important;
    }

    /deep/.el-tabs__header {
      background-color: #f2f2f2 !important;
    }
  }
}

.Collapse {
  background-color: #fff;
  margin-right: 20px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #ccc;
  overflow-y: scroll;

  .collapse_tltie {
    display: block;
    width: 70px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .Collapse_head {
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #ccc;
    background-color: #f2f2f2;
  }

  .Collapse_contenr_conter {
    padding: 10px;
  }

  .Collapse_contenr_b {
    font-size: 12px;
    color: #666;
    padding: 0 10px 10px 10px;
  }

  .Collapse_box {
    background-color: #f2f2f2;
    width: 96%;
    margin: 10px auto 0;
    height: 508px;
    overflow: auto;
  }

  .Collapse_contenr {
    height: 100%;
    max-height: 200px;
    width: 100%;
    overflow-y: scroll;
    word-wrap: break-word;
  }

  .Collapse_contenr::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .Collapse_contenr::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }

  .Collapse_contenr::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .Collapse_contenr_a {
    a {
      color: #666;
      text-decoration: none;
    }
  }

  .Collapse_contenr_a a:hover {
    color: #2183d8;
  }
}

.Collapse::-webkit-scrollbar {
  display: none;
}

/deep/.el-collapse-item__header {
  background-color: #f2f2f2;
  padding-left: 10px;
  height: 40px;
}

/deep/.el-pagination {
  margin-top: 5px;
}

/deep/.el-collapse-item__content {
  padding-bottom: 0;
}
</style>
